<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>活动广场</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <link rel="Shortcut Icon" href="../../images/wangyeicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <link rel="stylesheet" href="../../css/set_model.css">
    <style>
        #div1 {
            vertical-align: top;
            box-sizing: border-box;
            transition: all .5s;
            -webkit-transition: all .5s; /* Safari */
        }

        #div1:hover {
            cursor: pointer;
            transform: scale(1.03);
            -ms-transform: scale(1.03); /* IE 9 */
            -moz-transform: scale(1.03); /* Firefox */
            -webkit-transform: scale(1.03); /* Safari 和 Chrome */
            -o-transform: scale(1.03);
        }
    </style>
</head>
<body>
<!-- 头部导航栏 -->
<nav class="bg-white  shadow-sm sticky-top">
    <div class="container">
        <div class="row">
            <div class="col">
                <nav class="navbar p-3 navbar-expand-lg navbar-light">
                    <a class="navbar-brand" href="#">
                        <img src="../../images/logo1.png" class="img-fluid" style="max-width:80px;" alt="logo">
                    </a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse"
                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">组队广场</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link" href="#">
                                    活动广场
                                </a>
                            </li>
                        </ul>
                        <ul class="navbar-nav ml-md-auto">
                            <li class="nav-item dropdown">
                                <a class="btn btn-outline-primary nav-item  dropdown-toggle mr-md-2" href=""
                                   id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    发起
                                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-cursor"
                                         fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd"
                                              d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103zM2.25 8.184l3.897 1.67a.5.5 0 0 1 .262.263l1.67 3.897L12.743 3.52 2.25 8.184z"/>
                                    </svg>
                                </a>
                                <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
                                    <a class="dropdown-item " href="#">发起组队</a>
                                    <a class="dropdown-item " href="#" target="_blank">发起活动</a>
                                </div>
                            </li>
                            <li class="nav-item">
                                <a class="btn btn-primary nav-item" href="#">
                                    消息<span class="badge badge-light ml-2">8</span>
                                    <span class="sr-only">unread messages</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-item  dropdown-toggle mr-md-2" href="#" id="my" data-toggle="dropdown"
                                   aria-haspopup="true" aria-expanded="false">
                                    <img class="img-fluid rounded-circle pl-2 ml-1" src="../../images/logo.jpg"
                                         style="max-width: 50px">
                                </a>
                                <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="my">
                                    <a class="dropdown-item " href="#">我的卡片</a>
                                    <a class="dropdown-item " href="#" target="_blank">个人中心</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item btn btn-primary btn-lg logoff-btn" href="#"
                                       data-toggle="modal" data-target="#logoffModal">退出登陆</a>
                                </div>

                            </li>
                        </ul>

                    </div>
                </nav>
            </div>
        </div>
    </div>
</nav>
<!-- 小头部-->
<section>
    <div class="container">
        <div class="row mt-3">
            <div class="ml-4 col-md-4 col-sm-12">
                <h3 class="d-inline-block">活动广场</h3><small class="pl-3">在活动广场找到心仪的活动吧^_^</small>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col">
                <ul class="nav">
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">分类：</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">全部</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">动作类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">设计类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">文艺类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">创作类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">校外</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">其他</a>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</section>

<!-- 内容 -->
<section>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="card  mt-3" id="div1">
                    <div class="row no-gutters">
                        <div class="col-md-8">
                            <div class="card-body">
                                <h6 class="card-title font-weight-bold">
                                    <span class="badge badge-info pr-2 mr-2">文艺类</span>
                                    <a class="text-decoration-none" href="#">第10届校园歌手大赛来啦！！</a>
                                </h6>
                                <p class="card-text">
                                    <small>规模:</small><small class="text-muted ml-2" style="max-width: 50px;">校级</small>
                                    <small class="ml-2">发布于: </small><small class="text-muted">2020-10-23 14:01</small>
                                    <small class="ml-2">截至于: </small><small class="text-muted">2020-11-23 14:01</small>
                                </p>
                            </div>
                        </div>
                        <div class="col-md-4 text-center pt-2">
                            <div class="d-none  d-md-block">
                                <img src="../../images/logo.jpg" class="card-img rounded-circle shadow-sm"
                                     style="max-width: 60px" alt="...">
                            </div>
                            <small class="d-block pl-2 text-primary">@username</small>
                        </div>
                    </div>
                </div>
                <div class="card  mt-3">
                    <div class="row no-gutters">
                        <div class="col-md-8">
                            <div class="card-body">
                                <h6 class="card-title font-weight-bold">
                                    <span class="badge badge-primary pr-2 mr-2">创作类</span>
                                    <a class="text-decoration-none" href="#">第200届挑战杯大赛来啦！！</a>
                                </h6>
                                <p class="card-text">
                                    <small>规模:</small><small class="text-muted ml-2" style="max-width: 50px;">校级</small>
                                    <small class="ml-2">发布于: </small><small class="text-muted">2020-10-23 14:01</small>
                                    <small class="ml-2">截至于: </small><small class="text-muted">2020-11-23 14:01</small>
                                </p>
                            </div>
                        </div>
                        <div class="col-md-4 text-center pt-2">
                            <div class="d-none  d-md-block">
                                <img src="../../images/logo.jpg" class="card-img rounded-circle shadow-sm"
                                     style="max-width: 60px" alt="...">
                            </div>
                            <small class="d-block pl-2 text-primary">@username</small>
                        </div>
                    </div>
                </div>
                <div class="card  mt-3">
                    <div class="row no-gutters">
                        <div class="col-md-8">
                            <div class="card-body">
                                <h6 class="card-title font-weight-bold">
                                    <span class="badge badge-primary pr-2 mr-2">动作类</span>
                                    <a class="text-decoration-none" href="#">第100届头铁大赛诚邀您的报名！！</a>
                                </h6>
                                <p class="card-text">
                                    <small>规模:</small><small class="text-muted ml-2" style="max-width: 50px;">校级</small>
                                    <small class="ml-2">发布于: </small><small class="text-muted">2020-10-23 14:01</small>
                                    <small class="ml-2">截至于: </small><small class="text-muted">2020-11-23 14:01</small>
                                </p>
                            </div>
                        </div>
                        <div class="col-md-4 text-center pt-2">
                            <div class="d-none  d-md-block">
                                <img src="../../images/logo.jpg" class="card-img rounded-circle shadow-sm"
                                     style="max-width: 60px" alt="...">
                            </div>
                            <small class="d-block pl-2 text-primary">@username</small>
                        </div>
                    </div>
                </div>
                <div class="card  mt-3">
                    <div class="row no-gutters">
                        <div class="col-md-8">
                            <div class="card-body">
                                <h6 class="card-title font-weight-bold">
                                    <span class="badge badge-secondary pr-2 mr-2">文艺类</span>
                                    <a class="text-decoration-none" href="#">外文院英文演讲比赛即将开始！</a>
                                </h6>
                                <p class="card-text">
                                    <small>规模:</small><small class="text-muted ml-2" style="max-width: 50px;">院级</small>
                                    <small class="ml-2">发布于: </small><small class="text-muted">2020-10-23 14:01</small>
                                    <small class="ml-2">截至于: </small><small class="text-muted">2020-11-23 14:01</small>
                                </p>
                            </div>
                        </div>
                        <div class="col-md-4 text-center pt-2">
                            <div class="d-none  d-md-block">
                                <img src="../../images/logo.jpg" class="card-img rounded-circle shadow-sm"
                                     style="max-width: 60px" alt="...">
                            </div>
                            <small class="d-block pl-2 text-primary">@username</small>
                        </div>
                    </div>
                </div>
                <div class="card  mt-3">
                    <div class="row no-gutters">
                        <div class="col-md-8">
                            <div class="card-body">
                                <h6 class="card-title font-weight-bold">
                                    <span class="badge badge-primary pr-2 mr-2">创作类</span>
                                    <a class="text-decoration-none" href="#">第200届挑战杯大赛来啦！！</a>
                                </h6>
                                <p class="card-text">
                                    <small>规模:</small><small class="text-muted ml-2" style="max-width: 50px;">校级</small>
                                    <small class="ml-2">发布于: </small><small class="text-muted">2020-10-23 14:01</small>
                                    <small class="ml-2">截至于: </small><small class="text-muted">2020-11-23 14:01</small>
                                </p>
                            </div>
                        </div>
                        <div class="col-md-4 text-center pt-2">
                            <div class="d-none  d-md-block">
                                <img src="../../images/logo.jpg" class="card-img rounded-circle shadow-sm"
                                     style="max-width: 60px" alt="...">
                            </div>
                            <small class="d-block pl-2 text-primary">@username</small>
                        </div>
                    </div>
                </div>
                <div class="card  mt-3">
                    <div class="row no-gutters">
                        <div class="col-md-8">
                            <div class="card-body">
                                <h6 class="card-title font-weight-bold">
                                    <span class="badge badge-primary pr-2 mr-2">创作类</span>
                                    <a class="text-decoration-none" href="#">第200届挑战杯大赛来啦！！</a>
                                </h6>
                                <p class="card-text">
                                    <small>规模:</small><small class="text-muted ml-2" style="max-width: 50px;">校级</small>
                                    <small class="ml-2">发布于: </small><small class="text-muted">2020-10-23 14:01</small>
                                    <small class="ml-2">截至于: </small><small class="text-muted">2020-11-23 14:01</small>
                                </p>
                            </div>
                        </div>
                        <div class="col-md-4 text-center pt-2">
                            <div class="d-none  d-md-block">
                                <img src="../../images/logo.jpg" class="card-img rounded-circle shadow-sm"
                                     style="max-width: 60px" alt="...">
                            </div>
                            <small class="d-block pl-2 text-primary">@username</small>
                        </div>
                    </div>
                </div>
                <div class="card  mt-3">
                    <div class="row no-gutters">
                        <div class="col-md-8">
                            <div class="card-body">
                                <h6 class="card-title font-weight-bold">
                                    <span class="badge badge-primary pr-2 mr-2">创作类</span>
                                    <a class="text-decoration-none" href="#">第200届挑战杯大赛来啦！！</a>
                                </h6>
                                <p class="card-text">
                                    <small>规模:</small><small class="text-muted ml-2" style="max-width: 50px;">校级</small>
                                    <small class="ml-2">发布于: </small><small class="text-muted">2020-10-23 14:01</small>
                                    <small class="ml-2">截至于: </small><small class="text-muted">2020-11-23 14:01</small>
                                </p>
                            </div>
                        </div>
                        <div class="col-md-4 text-center pt-2">
                            <div class="d-none  d-md-block">
                                <img src="../../images/logo.jpg" class="card-img rounded-circle shadow-sm"
                                     style="max-width: 60px" alt="...">
                            </div>
                            <small class="d-block pl-2 text-primary">@username</small>
                        </div>
                    </div>
                </div>
                <div class="card  mt-3">
                    <div class="row no-gutters">
                        <div class="col-md-8">
                            <div class="card-body">
                                <h6 class="card-title font-weight-bold">
                                    <span class="badge badge-primary pr-2 mr-2">创作类</span>
                                    <a class="text-decoration-none" href="#">第200届挑战杯大赛来啦！！</a>
                                </h6>
                                <p class="card-text">
                                    <small>规模:</small><small class="text-muted ml-2" style="max-width: 50px;">校级</small>
                                    <small class="ml-2">发布于: </small><small class="text-muted">2020-10-23 14:01</small>
                                    <small class="ml-2">截至于: </small><small class="text-muted">2020-11-23 14:01</small>
                                </p>
                            </div>
                        </div>
                        <div class="col-md-4 text-center pt-2">
                            <div class="d-none  d-md-block">
                                <img src="../../images/logo.jpg" class="card-img rounded-circle shadow-sm"
                                     style="max-width: 60px" alt="...">
                            </div>
                            <small class="d-block pl-2 text-primary">@username</small>
                        </div>
                    </div>
                </div>
                <div class="card  mt-3">
                    <div class="row no-gutters">
                        <div class="col-md-8">
                            <div class="card-body">
                                <h6 class="card-title font-weight-bold">
                                    <span class="badge badge-primary pr-2 mr-2">创作类</span>
                                    <a class="text-decoration-none" href="#">第200届挑战杯大赛来啦！！</a>
                                </h6>
                                <p class="card-text">
                                    <small>规模:</small><small class="text-muted ml-2" style="max-width: 50px;">校级</small>
                                    <small class="ml-2">发布于: </small><small class="text-muted">2020-10-23 14:01</small>
                                    <small class="ml-2">截至于: </small><small class="text-muted">2020-11-23 14:01</small>
                                </p>
                            </div>
                        </div>
                        <div class="col-md-4 text-center pt-2">
                            <div class="d-none  d-md-block">
                                <img src="../../images/logo.jpg" class="card-img rounded-circle shadow-sm"
                                     style="max-width: 60px" alt="...">
                            </div>
                            <small class="d-block pl-2 text-primary">@username</small>
                        </div>
                    </div>
                </div>

            </div>
            <div class="col-12 mt-3">
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-center">
                        <li class="page-item">
                            <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</section>

<!-- 退出登录的模态框 -->
<div class="modal fade" id="logoffModal" tabindex="-1" role="dialog" aria-labelledby="logoffModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="prompt-text">点击"确定"退出账号</div>
                <div class="bgimg_lf"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>

<!--引入JQuery,再引入popper.js，最后引入bootstrap.js-->
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.bundle.js"></script>
</body>
</html>